<template>
  <div class="cloud-stock-details">
    <c-title text="门店申请详情"></c-title>
    <div class="box">
      <div class="flex center mb24">
        <span class="c-999">会员：</span>
        <img style="width: 1.5rem; border-radius: 100px; margin-right: 0.25rem;" :src="info.member_avatar" />
        <span>{{ info.member_nickanme }}</span>
      </div>
      <div class="mb24">
        <span class="c-999">门店名称：</span>
        <span>{{ info.store_name }}</span>
      </div>
      <div class="mb24">
        <div class="c-999 mb16">门店LOGO：</div>
        <img @click="showImage(info.thumb)" :src="info.thumb"
          style="width: 9.375rem; height: 9.375rem; border-radius: 0.125rem;" />
      </div>
      <div class="mb24">
        <span class="c-999">分类：</span>
        <span>{{ info.category_name }}</span>
      </div>
      <div class="mb24">
        <span class="c-999">门店地址：</span>
        <span>{{ info.province }}-{{ info.city }}-{{ info.district }}-{{ info.street }}</span>
      </div>
      <div class="mb24">
        <span class="c-999">详细地址(门牌号)：</span>
        <span>{{ info.address }}</span>
      </div>
      <div class="mb24">
        <span class="c-999">营业时间：</span>
        <span>{{ info.business_hours_start }}-{{ info.business_hours_end }}</span>
      </div>
      <div class="mb24">
        <p class="c-999 mb16">轮播图：</p>
        <template v-if="info.banner_thumb && info.banner_thumb.length !== 0">
          <div v-for="(item, i) in info.banner_thumb" :key="item" class="mb16">
            <img @click="showImage(info.banner_thumb[i], info.banner_thumb.length, info.banner_thumb)"
              style="width: 9.375rem; height: 9.375rem; border-radius: 0.125rem;" :src="item" />
          </div>
        </template>
      </div>
      <div class="mb24">
        <p class="c-999 mb16">资质：</p>
        <template v-if="info.aptitude && info.aptitude.length !== 0">
          <div v-for="(item, i)  in info.aptitude" :key="item" class="mb16">
            <img @click="showImage(info.aptitude[i], info.aptitude.length, info.aptitude)"
              style="width: 9.375rem; height: 9.375rem; border-radius: 0.125rem;" :src="item" />
          </div>
        </template>
      </div>
      <div class="mb24">
        <p class="c-999 mb16">身份证正反面：</p>
        <template v-if="info.id_card && info.id_card.length !== 0">
          <div v-for="(item, i) in info.id_card" :key="item" class="mb16">
            <img @click="showImage(info.id_card[i], info.id_card.length, info.id_card)"
              style="width: 9.375rem; height: 9.375rem; border-radius: 0.125rem;" :src="item" />
          </div>
        </template>
      </div>
      <div class="mb24">
        <p class="c-999 mb16">其它图片：</p>
        <template v-if="info.other_image && info.other_image.length !== 0">
          <div v-for="(item, i) in info.other_image" :key="item" class="mb16">
            <img @click="showImage(info.other_image[i], info.other_image.length, info.other_image)"
              style="width: 9.375rem; height: 9.375rem; border-radius: 0.125rem;" :src="item" />
          </div>
        </template>
      </div>
      <div class="mb24">
        <span class="c-999">姓名：</span>
        <span>{{ info.realname }}</span>
      </div>
      <div class="mb24">
        <span class="c-999">店铺电话：</span>
        <span>{{ info.mobile }}</span>
      </div>
      <div class="mb24">
        <span class="c-999">门店简介：</span>
        <span>{{ info.store_introduce }}</span>
      </div>
      <div class="mb24">
        <span class="c-999">备注：</span>
        <span>{{ info.remark }}</span>
      </div>
    </div>
    <div style="padding-bottom: 1.25rem;"></div>
    <div class="buttons" v-if="info.status == 0">
      <div class="center flex"  style="background: #fff; justify-content: center; flex: 1; padding: 0.7813rem 0;">
        <img style="width: 1rem; height: 1rem; margin-right: 0.25rem;"
          src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cashier/reject.png" />
        <span class="c-999" @click="apply_handle('cancel')">驳回</span>
      </div>
      <div class="center flex" style="background: #34ae59; justify-content: center; flex: 1; padding: 0.7813rem 0; color: #fff;">
        <img style="width: 1rem; height: 1rem; margin-right: 0.25rem;"
          src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/store-cashier/details-pass.png" />
        <span @click="apply_handle('pass')">通过</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  data() {
    return {
      info: {}
    };
  },
  activated() {
    this.getData()
  },
  methods: {
    apply_handle(type) {
      let message = '';
      if (type == 'pass') {
        message = "是否确认通过该门店申请？"
      } else {
        message = "是否确认驳回该门店申请？"
      }
      this.$dialog.confirm({
        message,
      }).then(() => {
        let url = '';
        if (type == 'pass') {
          url = 'plugin.store-cashier.frontend.store.parent-apply.accept';
        } else {
          url = 'plugin.store-cashier.frontend.store.parent-apply.reject';
        }
        $http.post(url, { id: this.$route.params.id ||this.$route.query.id}, 'loading').then(res => {
          if (res.result == 0) {
            return this.$toast(res.msg)
          }
          this.$toast(res.msg);
          this.$router.replace(this.fun.getUrl('store_applyfor'))
        })
      })
        .catch(() => {
          // on cancel
        });
    },
    showImage(src, num = 1, _arr) {
      let arr = []
      if (num == 1) {
        arr.push(src)
      } else if (num > 1) {
        arr.push(..._arr)
      }
      ImagePreview(arr);
    },
    async getData() {
      let { result, msg, data } = await $http.post('plugin.store-cashier.frontend.store.parent-apply.detail', { id: this.$route.params.id || this.$route.query.id })
      if (result == 0) {
        return this.$toast(msg);
      }
      this.info = data;
    }
  }
};
</script>

<style scoped lang="scss">
.cloud-stock-details {
  .flex {
    display: flex;
  }

  .buttons {
    display: flex;
    justify-content: space-evenly;
  }

  img {
    margin: 0;
  }

  .box {
    margin: 0.5rem 0.75rem;
    background: #fff;
    border-radius: 0.25rem;
    text-align: left;
    padding: 0.75rem;
  }

  .mb16 {
    margin-bottom: 0.5rem;
  }

  .mb24 {
    margin-bottom: 0.75rem;
  }

  .c-999 {
    color: #999;
  }

  .flex {
    display: flex;
  }

  .center {
    align-items: center;
  }
}
</style>
